<template>
	<view>
		<u-navbar height="50" back-icon-color="#333" title="评价晒单" title-color="#333" :border-bottom="false"
			title-size="36">
		</u-navbar>
		<view class="layoutView">
			<view class="goodsView">
				<u-image width="120rpx" height="120rpx" border-radius="10" :src="goods_image"></u-image>
				<text class="goodsTitle">{{goods_name}}</text>
			</view>
			<view class="commentView">
				<view class="commentTitle">商品评价</view>
				<u-rate size="34" :count="5" gutter="30" active-color="#F6632D" @change="onChange"></u-rate>
				<view class="rateText" v-if="goods_star == 1">非常差</view>
				<view class="rateText" v-if="goods_star == 2">差</view>
				<view class="rateText" v-if="goods_star == 3">一般</view>
				<view class="rateText" v-if="goods_star == 4">好</view>
				<view class="rateText" v-if="goods_star == 5">非常好</view>
			</view>
			<view class="inputView">
				<textarea class="inputData" placeholder="请输入评论内容" placeholder-style="color:#999"
					v-model="content"></textarea>
				<u-upload ref="uUpload" :action="action" :custom-btn="true" :show-progress="false" max-count="9"
					@on-change="onUpload" @on-remove="onRemove">
					<u-icon slot="addBtn" name="/static/upload.png" size="180"></u-icon>
				</u-upload>
			</view>
		</view>
		<view class="postView" @click="onOrderComment()">确认评价</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 'http://zgdfzc.com/api/public/images/upload',
				goods_id: '',
				goods_name: '',
				goods_image: '',
				content: '',
				imageList: [],
				goods_star: ''
			}
		},
		onLoad(res) {
			this.initData(res);
		},
		methods: {
			initData(res) {
				this.goods_id = this.$utils.strEmpty(res.goods_id);
				this.goods_name = this.$utils.strEmpty(res.goods_name);
				this.goods_image = this.$utils.strEmpty(res.goods_image);
			},
			onUpload(res) {
				if (res.statusCode == 200) {
					console.log(JSON.stringify(res,null,2))
					let json = JSON.parse(res.data);
					this.imageList.push(json.data);
				}
			},
			onRemove(index) {
				this.imageList.splice(index, 1);
			},
			onChange(value) {
				this.goods_star = value;
			},
			onOrderComment() {
				let self = this;
				self.$user.orderAppraise({
					order_goods_id: this.goods_id,
					goods_star: this.goods_star,
					content: this.content,
					images: this.imageList
				}, true).then(res => {
					self.$utils.tips('评价成功');
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						});
					}, 500);
				});
			}
		}
	}
</script>

<style>
	@import url('order-comment.css');

	page {
		background: #f5f5f5;
	}
</style>
